<template>
  <div class="tpage">
    <div class="summary_box">
      <p class="census">
        {{ datatimeStr }}&nbsp;收款&nbsp;{{ payCount }}&nbsp;笔，合计
      </p>
      <p class="momeny">¥{{ moneyTotal }}</p>
      <div class="date_box">
        <div class="cell" style="position: relative">
          <img src="@/assets/images/date_range.png" />
          <p>更换日期</p>

          <yd-datetime
            type="date"
            v-model="datatime"
            style="
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              opacity: 0;
            "
          ></yd-datetime>
        </div>
        <!--<div class="cell" style="border-left: 1px solid rgba(253, 249, 249, 100);">-->
        <!--<img src="@/assets/images/settings.png"/>-->
        <!--<p>系统管理</p>-->
        <!--</div>-->
      </div>
    </div>

    <div class="info_card">
      <ul class="info_list">
        <li v-for="item in list[0]" :key="'ls' + item.id">
          <i class="icon bar"></i>
          <label>{{ item.username }}</label>
          <span>¥{{ item.total }}</span>
        </li>
        <li>
          <i class="icon bar"></i>
          <label>总入账</label>
          <span>¥{{ moneyTotal }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { DateTime } from "vue-ydui/dist/lib.rem/datetime";
import { queryinfotime } from "@api/public";
import moment from "moment";
import $store from "../store";

Vue.component(DateTime.name, DateTime);

export default {
  name: "Turnover",
  data() {
    return {
      datatime: moment().format("YYYY-MM-DD"),
      moneyTotal: 0,
      payCount: 0,
      list: [],
    };
  },
  watch: {
    datatime(val, old) {
      if (val && val != old) {
        this.getData();
      }
    },
  },
  computed: {
    datatimeStr() {
      if (this.datatime == moment().format("YYYY-MM-DD")) {
        return "今日";
      } else {
        return this.datatime;
      }
    },
  },
  methods: {
    getData() {
      queryinfotime({
        datatime: this.datatime,
        username: $store.state.app.userInfo.username,
      })
        .then((res) => {
          if (res.code == 1) {
            this.moneyTotal = this.formatMoney(res.data.amount, 2);
            this.payCount = res.data.paycount;
            this.list = JSON.parse(res.data.list);
          } else {
            this.moneyTotal = 0;
            this.payCount = 0;
            this.list = [];
            this.$dialog.success(res.data.msg);
          }
        })
        .catch((err) => {
          this.$dialog.error(err.msg);
        });
    },
    formatMoney(s, n) {
      n = n > 0 && n <= 20 ? n : 2;
      s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
      let l = s.split(".")[0].split("").reverse(),
        r = s.split(".")[1],
        t = "";
      for (let i = 0; i < l.length; i++) {
        t += l[i] + ((i + 1) % 3 == 0 && i + 1 != l.length ? "," : "");
      }
      return t.split("").reverse().join("") + "." + r;
    },
  },
  mounted() {
    this.getData();
  },
};
</script>